import 'braft-editor/dist/index.css';
import './index.less';
import React from 'react';
import { ContentUtils } from 'braft-utils';
import BraftEditor from 'braft-editor';
import AliyunOSSUpload from '@/components/AliyunOSSUpload';

export default class BasicDemo extends React.Component {
  state = {
    editorState: BraftEditor.createEditorState(this.props.content ?? null), // 设置编辑器初始内容
  };

  handleChange = (editorState) => {
    if (!editorState.isEmpty()) {
      this.props.setdetailsKey(editorState.toHTML());
    } else {
      this.props.setdetailsKey('');
    }
    this.setState({
      editorState: editorState,
    });
  };
  insetImage = (url) =>
    this.setState({
      editorState: ContentUtils.insertMedias(this.state.editorState, [
        {
          type: 'IMAGE',
          url: url,
        },
      ]),
    });

  render() {
    const { editorState } = this.state;
    const extendControls = [
      {
        key: 'antd-uploader',
        type: 'component',
        component: (
          <AliyunOSSUpload accept="image/*" showUploadList={false} insetImage={this.insetImage}>
            <button
              type="button"
              className="control-item button upload-button"
              data-title="插入图片"
            >
              插入图片
            </button>
          </AliyunOSSUpload>
        ),
      },
    ];
    return (
      <div>
        <div className="editor-wrapper">
          <BraftEditor
            value={editorState}
            onChange={this.handleChange}
            extendControls={extendControls}
          />
        </div>
      </div>
    );
  }
}
